<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/layout/layout.xhtml">

	<ui:define name="content">
		<h:form id="form">
			<p:panel header="Hotesse" toggleable="true" toggleSpeed="500">
				<h:panelGrid columns="3" cellpadding="1"
					columnClasses="label, input, message">
					<h:outputLabel for="nom" value="Nom" />
					<h:inputText id="nom"
						value="#{nouvelleHotesseControler.hotesse.nom}"
						label="Nom">
					</h:inputText>
					<p:message for="nom" />

					<h:outputLabel for="prenom" value="Prenom" />
					<h:inputText id="prenom"
						value="#{nouvelleHotesseControler.hotesse.prenom}"
						label="Prenom">
					</h:inputText>
					<p:message for="prenom" />

					<h:outputLabel for="dateDeNaissance" value="Date de naissance" />
					<p:calendar id="dateDeNaissance"
						value="#{nouvelleHotesseControler.hotesse.dateDeNaissance}"
						showOn="button" pattern="dd/MM/yyyy" mindate="01/01/1950"
						popIconOnly="true" locale="fr" showButtonPanel="true" />
					<p:message for="dateDeNaissance" />
				</h:panelGrid>
			</p:panel>
			
			<p:panel header="Adresse" toggleable="true" toggleSpeed="500">
				<h:panelGrid columns="3" cellpadding="1"
					columnClasses="label, input, message">
					
					<h:outputLabel for="nomDeRue" value="Nom de rue" />
					<h:inputText id="nomDeRue"
						value="#{nouvelleHotesseControler.hotesse.adresse.nomDeRue}" />
					<p:message for="nomDeRue" />

					<h:outputLabel for="codePostal" value="Code Postal" />
					<h:inputText id="codePostal"
						value="#{nouvelleHotesseControler.hotesse.adresse.codePostal}" />
					<p:message for="codePostal" />

					<h:outputLabel for="ville" value="Ville" />
					<h:inputText id="ville"
						value="#{nouvelleHotesseControler.hotesse.adresse.ville}" />
					<p:message for="ville" />

					<h:outputLabel for="email" value="Email" />
					<h:inputText id="email"
						value="#{nouvelleHotesseControler.hotesse.adresse.email}" />
					<p:message for="email" />

					<h:outputLabel for="telDomicile" value="Telephone domicile" />
					<h:inputText id="telDomicile"
						value="#{nouvelleHotesseControler.hotesse.adresse.telDomicile}" />
					<p:message for="telDomicile" />

					<h:outputLabel for="telPortable" value="Telephone portable" />
					<h:inputText id="telPortable"
						value="#{nouvelleHotesseControler.hotesse.adresse.telPortable}" />
					<p:message for="telPortable" />

				</h:panelGrid>
			</p:panel>
			
			<p:panel id="panelInfosHotesse" header="Infos hotesse" toggleable="true" toggleSpeed="500">
				<h:panelGrid columns="3" cellpadding="1" columnClasses="label, input, message">
					
					<h:outputLabel for="tailleHaut" value="Taille haut" />
					<h:selectOneMenu id="tailleHaut"
						value="#{nouvelleHotesseControler.hotesse.tailleHaut}">
						<f:selectItems value="#{applicationControler.taillesHaut}"
							var="tailleHaut" itemValue="#{tailleHaut}" itemLabel="#{tailleHaut.nom}" />
					</h:selectOneMenu>
					<p:message for="tailleHaut" />
					
					<h:outputLabel for="tailleBas" value="Taille bas" />
					<h:selectOneMenu id="tailleBas"
						value="#{nouvelleHotesseControler.hotesse.tailleBas}">
						<f:selectItems value="#{applicationControler.taillesBas}"
							var="tailleBas" itemValue="#{tailleBas}" itemLabel="#{tailleBas.nom}" />
					</h:selectOneMenu>
					<p:message for="tailleBas" />
					
					<h:outputLabel for="preferences" value="Preferences" />
					<p:inputTextarea id="preferences" rows="3" cols="30" 
						value="#{nouvelleHotesseControler.hotesse.preferences}"/>
					<p:message for="preferences" />
					
					<h:outputLabel for="commentaires" value="Commentaires" />
					<p:inputTextarea id="commentaires" rows="3" cols="30" 
						value="#{nouvelleHotesseControler.hotesse.commentaires}"/>
					<p:message for="commentaires" />
					
					<h:outputLabel for="achats" value="Achats" />
					<p:inputTextarea id="achats" rows="3" cols="30" 
						value="#{nouvelleHotesseControler.hotesse.achats}"/>
					<p:message for="achats" />
					
					<h:outputLabel value="Produits" />
					<p:commandLink style="color:blue" value="Ajouter" onclick="ajouterProduitDialog.show()" />
					<br />
					
					<h:outputLabel for="listProduits" value="" />				
					<p:dataList id="listProduits" value="#{nouvelleHotesseControler.hotesse.produits}" 
						var="produit" itemType="square" style="height:20px;">  
					    #{produit.nom}, #{produit.categorie.nom}, #{produit.prix} &#8364; (#{produit.collection.nom})
					</p:dataList>
					<br />
					
					<h:outputLabel for="derniereVisite" value="Derniere visite" />
					<p:calendar id="derniereVisite"
						value="#{nouvelleHotesseControler.hotesse.derniereVisite}"
						showOn="button" pattern="dd/MM/yyyy" mindate="01/01/1950"
						popIconOnly="true" locale="fr" showButtonPanel="true" />
					<p:message for="derniereVisite" />
				</h:panelGrid>
			</p:panel>
			
			<p:dialog header="Ajouter produit"
				widgetVar="ajouterProduitDialog" resizable="false">
				<p:dataTable id="tableproduits" var="produit" rows="15"  rowKey="#{produit.id}"
					value="#{listeProduitControler.produits}"
					selection="#{nouvelleHotesseControler.selectedProduits}"
					paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
					paginator="true"
					emptyMessage="Pas de produit avec ces critères de recherche">
		
					<p:column selectionMode="multiple" />
		
					<p:column filterBy="#{produit.collection.nom}" headerText="Collection">
						<f:facet name="header">
							<h:outputText value="Collection" />
						</f:facet>
						<h:outputText value="#{produit.collection.nom}" />
					</p:column>
		
					<p:column filterBy="#{produit.nom}" headerText="Nom">
						<f:facet name="header">
							<h:outputText value="Nom" />
						</f:facet>
						<h:outputText value="#{produit.nom}" />
					</p:column>
					
					<p:column filterBy="#{produit.categorie.nom}" headerText="Categorie">
						<f:facet name="header">
							<h:outputText value="Categorie" />
						</f:facet>
						<h:outputText value="#{produit.categorie.nom}" />
					</p:column>
										
					<p:column filterBy="#{produit.prix}" headerText="Prix">
						<f:facet name="header">
							<h:outputText value="Prix" />
						</f:facet>
						<h:outputText value="#{produit.prix}" />
					</p:column>
		
					<f:facet name="footer" style="text-align: center">
						<p:commandButton value="Ajouter"
							actionListener="#{nouvelleHotesseControler.selectionnerProduitsListener}"
							oncomplete="ajouterProduitDialog.hide();" update=":form:panelInfosHotesse"/>
						<p:commandButton value="Annuler" ajax="false" immediate="true" />
					</f:facet>
				</p:dataTable>
			</p:dialog>

			<p:panel style="text-align: center">
				<p:commandButton
					action="#{nouvelleHotesseControler.ajouterHotesse}"
					value="Valider" ajax="false" />
				<p:commandButton action="#{nouvelleHotesseControler.annuler}"
					value="Annuler" ajax="false" immediate="true"
					style="margin-left:5px" />
			</p:panel>

		</h:form>
		
	</ui:define>
</ui:composition>